Angular Material এর MatTable কম্পোনেন্ট একটি শক্তিশালী এবং কাস্টমাইজযোগ্য ডেটা টেবিল তৈরি করার উপাদান। এটি বিভিন্ন ধরনের ডেটা দেখানোর জন্য ব্যবহৃত হয় এবং সাধারণত ডেটাবেস বা API থেকে প্রাপ্ত তথ্যের উপর ভিত্তি করে ডেটা প্রদর্শন করতে ব্যবহৃত হয়। Angular Material ডেটা টেবিলের মাধ্যমে আপনি সহজেই ডেটাকে টেবিল আকারে সজ্জিত এবং পরিচালনা করতে পারবেন।

Angular Material এর MatTable কম্পোনেন্ট ডেটা টেবিলের জন্য অনেক গুরুত্বপূর্ণ ফিচার সরবরাহ করে, যেমন পেজিনেশন, সর্টিং, ফিল্টারিং, ডেটা বাইন্ডিং ইত্যাদি।

Angular Material ডেটা টেবিল তৈরি করার জন্য পদক্ষেপ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে MatTableModule, MatPaginatorModule, এবং MatSortModule আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে:

import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';

@NgModule({
  imports: [
    MatTableModule,
    MatPaginatorModule,
    MatSortModule
  ]
})
export class AppModule {}

২. HTML টেমপ্লেটে ডেটা টেবিল তৈরি করা

MatTable কম্পোনেন্ট ব্যবহার করে টেবিল তৈরি করা যেতে পারে। নিচে একটি সাধারণ ডেটা টেবিলের উদাহরণ দেওয়া হলো:

<table mat-table [dataSource]="dataSource" matSort>

  <!-- Column Definitions -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <!-- Header and Row Definitions -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

৩. টেবিল ডেটা ও কলাম ডেফিনেশন

আপনার টেবিলের ডেটা এবং কলাম ডেফিনেশন টাইপস্ক্রিপ্ট ফাইলে নির্ধারণ করতে হবে। নিচে এর একটি উদাহরণ দেওয়া হলো:

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource: MatTableDataSource<Element>;

  constructor() {
    // Example data
    const data: Element[] = [
      { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
      { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
      { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
      { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
      // Add more data as needed
    ];

    // Assign data to the dataSource
    this.dataSource = new MatTableDataSource(data);
  }

  ngOnInit(): void {}

  // Set paginator and sort to the dataSource
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
}

// Interface for table data
export interface Element {
  position: number;
  name: string;
  weight: number;
  symbol: string;
}

• MatTableDataSource: এটি ডেটা টেবিলের ডেটাকে সঞ্চালন করে এবং পেজিনেশন, ফিল্টারিং, ও সর্টিং এর জন্য ব্যবহৃত হয়।
• displayedColumns: এটি টেবিলের কলামগুলির নামের একটি অ্যারে যা HTML টেমপ্লেট এ প্রদর্শিত হবে।
• MatPaginator এবং MatSort: এগুলো পেজিনেশন এবং সর্টিং কার্যকারিতার জন্য ব্যবহৃত হয়।

৪. পেজিনেশন ও সর্টিং যোগ করা

MatPaginator এবং MatSort পেজিনেশন এবং সর্টিং কার্যকারিতা প্রদান করে। আপনি উপরে প্রদত্ত কোডে MatPaginator এবং MatSort সঠিকভাবে যুক্ত করেছেন।

HTML ফাইলে পেজিনেশন ও সর্টিং কার্যকরী করতে এটি নির্ধারণ করুন:

<mat-paginator [length]="dataSource?.data.length" [pageSize]="5" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>

এখানে length ডেটার মোট সংখ্যা, pageSize প্রতিটি পেজে প্রদর্শিত আইটেমের সংখ্যা এবং pageSizeOptions পেজ সাইজের বিকল্পগুলি।

৫. ফিল্টারিং যোগ করা

ডেটা টেবিলের জন্য ফিল্টারিং অপশন যোগ করতে, আপনি MatTableDataSource এর filter প্রপার্টি ব্যবহার করতে পারেন। এটি একটি টেক্সট ইনপুট ফিল্ডের মাধ্যমে কার্যকর করা যায়।

HTML:

<input matInput (keyup)="applyFilter($event)" placeholder="Filter">

টাইপস্ক্রিপ্ট:

applyFilter(event: Event): void {
  const filterValue = (event.target as HTMLInputElement).value;
  this.dataSource.filter = filterValue.trim().toLowerCase();
}

এখানে applyFilter মেথডটি ইনপুটের মাধ্যমে ডেটা ফিল্টার করবে।

Angular Material ডেটা টেবিল (MatTable) ডেভেলপারদের জন্য একটি শক্তিশালী এবং কাস্টমাইজেবল টেবিল উপাদান যা ডেটা পেজিনেশন, সর্টিং, ফিল্টারিং, এবং ডেটা বাইন্ডিংয়ের সুবিধা প্রদান করে। এটি MatTableDataSource, MatPaginator, এবং MatSort এর মাধ্যমে ডেটা টেবিলের ব্যবস্থাপনা এবং কাস্টমাইজেশনকে সহজ করে তোলে। Angular Material এর ডেটা টেবিল ব্যবহার করে আপনি আধুনিক এবং ইন্টারঅ্যাকটিভ ডেটা প্রদর্শন তৈরি করতে পারেন।

Angular Material এর MatTable কম্পোনেন্ট একটি শক্তিশালী টেবিল কম্পোনেন্ট যা ডেটাকে সুশৃঙ্খলভাবে এবং পেশাদারভাবে প্রদর্শন করতে সহায়তা করে। এটি একটি কাস্টমাইজযোগ্য এবং রেসপন্সিভ টেবিল তৈরি করতে ব্যবহৃত হয়, যেখানে ব্যবহারকারী সহজেই ডেটা দেখতে এবং ইন্টারঅ্যাক্ট করতে পারে। MatTable কম্পোনেন্টে sorting, pagination, filtering, এবং অন্যান্য ইউজার ইন্টারঅ্যাকশন ফিচার অন্তর্ভুক্ত করা যেতে পারে।

Material Table এর বৈশিষ্ট্য

• Sorting: টেবিলের কলামগুলো সাজানোর সুবিধা।
• Pagination: টেবিলের ডেটা পেজিংয়ের মাধ্যমে বিভক্ত করা।
• Filtering: টেবিলের ডেটা অনুসন্ধান বা ফিল্টার করার সুবিধা।
• Expandable Rows: টেবিলের সারিগুলো এক্সপ্যান্ড করার সুবিধা (অথবা ডিটেইল ভিউ দেখতে)।
• Responsive: ছোট স্ক্রীনে স্বয়ংক্রিয়ভাবে টেবিলের কন্টেন্ট মানিয়ে নেয়।

Material Table তৈরি করা

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule মডিউলগুলো আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatInputModule
  ]
})
export class AppModule {}

২. টেবিল কম্পোনেন্ট তৈরি করা

MatTable কম্পোনেন্টে ডেটা প্রদর্শন করার জন্য একটি dataSource অ্যারে এবং কিছু কলাম ডিফাইন করতে হবে। প্রতিটি কলামের জন্য mat-header-cell এবং mat-cell ব্যবহার করা হয়।

উদাহরণ:

<table mat-table [dataSource]="dataSource" matSort>
  <!-- ID Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
    <td mat-cell *matCellDef="let element">{{element.id}}</td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
    <td mat-cell *matCellDef="let element">{{element.name}}</td>
  </ng-container>

  <!-- Age Column -->
  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Age</th>
    <td mat-cell *matCellDef="let element">{{element.age}}</td>
  </ng-container>

  <!-- Table Header and Row -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

এখানে:

• matColumnDef: এটি একটি কলামের ডিফিনিশন। id, name, এবং age হলো তিনটি কলামের উদাহরণ।
• mat-sort-header: এই ডিরেকটিভটি টেবিলের কলামগুলো সোর্ট করার জন্য ব্যবহৃত হয়।
• mat-header-cell: কলামের হেডারে ডেটা প্রদর্শন করার জন্য।
• mat-cell: কলামের ডেটা প্রদর্শন করার জন্য।

৩. ডেটা এবং ডেটা সোর্স (DataSource) কনফিগার করা

MatTable কম্পোনেন্টে ডেটা প্রদর্শন করার জন্য একটি ডেটা সোর্স তৈরি করতে হয় এবং কলামগুলো নির্ধারণ করতে হয়।

import { Component } from '@angular/core';

@Component({
  selector: 'app-basic-table',
  templateUrl: './basic-table.component.html',
})
export class BasicTableComponent {
  displayedColumns: string[] = ['id', 'name', 'age'];
  dataSource = [
    {id: 1, name: 'John', age: 25},
    {id: 2, name: 'Jane', age: 30},
    {id: 3, name: 'Alex', age: 35},
    {id: 4, name: 'Chris', age: 40},
  ];
}

এখানে:

• displayedColumns: এটি একটি অ্যারে যা টেবিলের কলামগুলো ধারণ করে এবং এটি HTML টেমপ্লেটে ব্যবহৃত হয়।
• dataSource: এটি টেবিলের ডেটা। এখানে একটি স্থির অ্যারে ব্যবহার করা হয়েছে, তবে আপনি এখানে ডাইনামিক ডেটাও ব্যবহার করতে পারেন।

৪. Pagination এবং Sorting যোগ করা

MatPaginator এবং MatSort মডিউল যোগ করে আপনি টেবিলের জন্য pagination এবং sorting যোগ করতে পারেন।

Pagination যোগ করা

<mat-paginator [length]="dataSource.length" [pageSize]="5"></mat-paginator>

এখানে:

• length: টেবিলের মোট ডেটার সংখ্যা।
• pageSize: প্রতিটি পেজে প্রদর্শিত আইটেমের সংখ্যা।

Sorting যোগ করা

<table mat-table [dataSource]="dataSource" matSort>
  <!-- Column Definitions (as shown above) -->
</table>

৫. Filtering (ফিল্টারিং) যোগ করা

টেবিলের ডেটা ফিল্টার করার জন্য matInput এবং MatTableDataSource ব্যবহার করা হয়।

<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">

import { MatTableDataSource } from '@angular/material/table';

export class BasicTableComponent {
  displayedColumns: string[] = ['id', 'name', 'age'];
  dataSource = new MatTableDataSource([
    {id: 1, name: 'John', age: 25},
    {id: 2, name: 'Jane', age: 30},
    {id: 3, name: 'Alex', age: 35},
    {id: 4, name: 'Chris', age: 40},
  ]);

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

এখানে:

• applyFilter(): এটি ডেটা সোর্সের ফিল্টারিং অ্যাপ্লাই করার জন্য ব্যবহার করা হয়।

Angular Material Table একটি শক্তিশালী এবং কাস্টমাইজযোগ্য টেবিল কম্পোনেন্ট যা sorting, pagination, এবং filtering সহ বিভিন্ন ফিচার প্রদান করে। এটি সহজেই MatTableModule, MatPaginatorModule, MatSortModule, এবং MatInputModule মডিউলগুলির মাধ্যমে ব্যবহার করা যায়। Angular Material Table দিয়ে আপনি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারীর জন্য উপযোগী করে তুলতে পারেন।

Angular Material এর MatTable কম্পোনেন্টটি একটি শক্তিশালী টুল, যা ডেটা টেবিল তৈরি করতে সহায়ক। এর সাথে MatSort ডিরেকটিভ ব্যবহার করে টেবিলের ডাটা সহজেই সাজানো (sorting) করা যায়। এই ফিচারটি ব্যবহারকারীদের সুবিধার্থে ডেটা দ্রুত সাজানোর সুযোগ প্রদান করে, যেমনঃ নামের অর্ডার, তারিখের অর্ডার ইত্যাদি।

এখানে, Angular Material এর মাধ্যমে টেবিলের ডাটা সাজানোর (sorting) প্রক্রিয়া কীভাবে কাজ করে তা দেখানো হলো।

প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে MatTableModule এবং MatSortModule মডিউলগুলি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে:

import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';

@NgModule({
  imports: [
    MatTableModule,
    MatSortModule
  ]
})
export class AppModule { }

টেবিলের ডাটা সাজানো (Sorting) HTML কোড

Angular Material এর MatSort ডিরেকটিভ ব্যবহার করে টেবিলের কলামগুলো সাজানো (sorting) করা যায়। প্রথমে টেবিলের HTML টেমপ্লেট তৈরি করুন এবং mat-sort-header ডিরেকটিভ যোগ করুন প্রতিটি কলামের জন্য, যেখানে আপনি সাজানোর ক্ষমতা চান।

HTML উদাহরণ:

<table mat-table [dataSource]="dataSource" matSort aria-label="Example table with sorting">
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Age Column -->
  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Age </th>
    <td mat-cell *matCellDef="let element"> {{element.age}} </td>
  </ng-container>

  <!-- Address Column -->
  <ng-container matColumnDef="address">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Address </th>
    <td mat-cell *matCellDef="let element"> {{element.address}} </td>
  </ng-container>

  <!-- Header and Row Definitions -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

এখানে:

• mat-sort-header: এই ডিরেকটিভটি ব্যবহার করে প্রতিটি কলামে সাজানোর (sorting) ক্ষমতা যোগ করা হচ্ছে।
• mat-header-cell: কলামের শিরোনাম যা ব্যবহারকারীদের সাজানোর জন্য ক্লিকযোগ্য করবে।
• mat-cell: প্রতিটি সেল, যেখানে ডেটা প্রদর্শিত হবে।

TypeScript কোড: ডাটা সাজানোর জন্য সেটআপ

এখন, MatSort ব্যবহার করতে, আপনাকে MatTableDataSource এবং MatSort ইনিশিয়ালাইজ করতে হবে। এর মাধ্যমে ডেটা সরবরাহ করা হবে এবং এটি টেবিলের ডাটাকে সাজানোর ক্ষমতা দেবে।

TypeScript উদাহরণ:

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  displayedColumns: string[] = ['name', 'age', 'address'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }
}

export interface Element {
  name: string;
  age: number;
  address: string;
}

const ELEMENT_DATA: Element[] = [
  {name: 'John', age: 25, address: 'New York'},
  {name: 'Jane', age: 30, address: 'London'},
  {name: 'Jack', age: 35, address: 'Paris'},
  {name: 'Jill', age: 40, address: 'Tokyo'},
];

এখানে:

• MatTableDataSource: এটি একটি টেবিল ডেটার সোর্স যা Angular Material টেবিলের জন্য ব্যবহৃত হয়।
• MatSort: এটি ডেটাকে সাজানোর (sorting) ক্ষমতা যোগ করে। @ViewChild(MatSort) ডিরেকটিভ ব্যবহার করে MatSort কম্পোনেন্টটি টেবিলের সাথে যুক্ত করা হচ্ছে।
• displayedColumns: এখানে আমরা টেবিলের যে কলামগুলো দেখাতে চাই তা তালিকাভুক্ত করেছি। এই অ্যারের মাধ্যমে আমরা HTML এ কলামগুলোকে সংজ্ঞায়িত করি।

ডাটা সাজানো (Sorting) কাজ করবে কিভাবে?

• টেবিলের শিরোনামে ক্লিক করা হলে: যখন ব্যবহারকারী কলামের শিরোনামে ক্লিক করবে, তখন সেই কলামের ডেটা সাজানো হবে (ascending অথবা descending অর্ডারে)।
• টেবিলের ডাটা সোর্স: Angular Material MatTableDataSource এর মাধ্যমে ডেটাকে প্রক্রিয়া করে এবং সাজানো (sorting) ও ফিল্টারিং ফিচার সমর্থন করে।

ফিল্টারিং যুক্ত করা

ডেটা সাজানোর সাথে সাথে আপনি ডেটা ফিল্টারিংও যোগ করতে পারেন, যা ডেটা খোঁজার সুবিধা প্রদান করবে।

ফিল্টারিং HTML

<input matInput (keyup)="applyFilter($event)" placeholder="Filter">

ফিল্টারিং TypeScript

applyFilter(event: Event) {
  const filterValue = (event.target as HTMLInputElement).value;
  this.dataSource.filter = filterValue.trim().toLowerCase();

  if (this.dataSource.paginator) {
    this.dataSource.paginator.firstPage();
  }
}

এখানে, applyFilter() ফাংশনটি keyup ইভেন্টের মাধ্যমে কল হয়, এবং এটি টেবিলের ডেটার মধ্যে ফিল্টার অ্যাপ্লাই করে।

Angular Material Table এর মাধ্যমে ডেটা সাজানো (sorting) একটি সহজ এবং কার্যকরী উপায়। MatSort ডিরেকটিভ এবং MatTableDataSource এর সাহায্যে আপনি খুব সহজেই ডেটা টেবিল সাজাতে পারেন এবং ব্যবহারকারীকে একটি ইন্টারঅ্যাকটিভ ইউজার এক্সপেরিয়েন্স প্রদান করতে পারেন। আপনি চাইলে ফিল্টারিং, পেজিনেশন এবং অন্যান্য কাস্টম ফিচারও একত্রে যোগ করতে পারেন।

Angular Material এর MatTable কম্পোনেন্টের সাথে পেজিনেশন (Pagination) যোগ করা একটি সাধারণ এবং কার্যকরী উপায়, যা বড় ডাটাসেটকে পেজে ভাগ করে প্রদর্শন করতে সাহায্য করে। এটি ব্যবহারকারীদের জন্য একটি দ্রুত এবং সুশৃঙ্খল উপায়ে ডেটা দেখতে সাহায্য করে। Angular Material পেজিনেশন কম্পোনেন্ট MatPaginator ব্যবহার করে আপনি সহজেই টেবিলের ডাটাকে পেজিনেট করতে পারেন।

প্রাথমিক প্রস্তুতি

প্রথমে, আপনাকে MatPaginatorModule এবং MatTableModule ইমপোর্ট করতে হবে।

১. মডিউল ইমপোর্ট করা

আপনার app.module.ts ফাইলে নিচের মতো মডিউলগুলো ইমপোর্ট করুন:

import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';

@NgModule({
  imports: [
    MatPaginatorModule,
    MatTableModule
  ]
})
export class AppModule { }

২. টেবিল এবং পেজিনেশন HTML তৈরি করা

এখন, আমরা MatTable এবং MatPaginator কম্পোনেন্ট ব্যবহার করে একটি টেবিল তৈরি করব, যা পেজিনেশন ফিচারও ধারণ করবে।

<table mat-table [dataSource]="dataSource">

  <!-- Column Definitions -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef> Age </th>
    <td mat-cell *matCellDef="let element"> {{element.age}} </td>
  </ng-container>

  <!-- Header and Row Definitions -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [length]="data.length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
</mat-paginator>

এখানে:

• mat-table: টেবিল কম্পোনেন্ট।
• matColumnDef: প্রতিটি কলামের জন্য ডিফাইনেশন।
• mat-paginator: পেজিনেশন কম্পোনেন্ট, যা পেজ সাইজ, পেজ সংখ্যার অপশন এবং পেজ পরিবর্তন ইভেন্ট নিয়ে কাজ করে।

৩. টেবিলের জন্য ডাটা এবং পেজিনেশন কনফিগার করা

এখন TypeScript ফাইলে ডাটা এবং পেজিনেশন সম্পর্কিত কনফিগারেশন করতে হবে।

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { PageEvent } from '@angular/material/paginator';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  displayedColumns: string[] = ['name', 'age'];
  data = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 28 },
    { name: 'Jack', age: 32 },
    { name: 'Jill', age: 29 },
    { name: 'James', age: 35 },
    { name: 'Julia', age: 31 },
    { name: 'Joseph', age: 26 },
    { name: 'Jessica', age: 30 },
    { name: 'Jordan', age: 27 },
    { name: 'Joan', age: 33 }
  ];

  dataSource = new MatTableDataSource(this.data);

  pageSize = 5;  // প্রতিটি পেজে কতটি রেকর্ড দেখাতে হবে
  pageSizeOptions: number[] = [5, 10, 15];  // পেজ সাইজের অপশন
  length = this.data.length;  // মোট ডাটা কতটুকু
  pageEvent: PageEvent;

  constructor() {
    // টেবিলের ডাটা আপডেট করা, পেজ পরিবর্তন হলে
    this.dataSource.paginator = this.paginator;
  }

  // পেজ পরিবর্তন হলে ফাংশনটি কল হবে
  handlePageEvent(event: PageEvent) {
    this.pageEvent = event;
    this.dataSource.paginator.pageIndex = event.pageIndex;
    this.dataSource.paginator.pageSize = event.pageSize;
  }
}

এখানে:

• MatTableDataSource: এটি ডাটা টেবিলের ডেটার উৎস (data source) হিসেবে কাজ করে এবং পেজিনেশন সমর্থন করে।
• pageSize: প্রতিটি পেজে কতটি আইটেম দেখানো হবে।
• length: টেবিলের মোট ডাটা (যেমন, ১০টি রেকর্ড)।
• handlePageEvent: এটি পেজ পরিবর্তন হলে কল হবে এবং পেজের তথ্য আপডেট করবে।

৪. স্টাইলিং (CSS) কাস্টমাইজেশন

Angular Material ডিফল্ট স্টাইলিং সরবরাহ করে, তবে আপনি চাইলে কিছু কাস্টম স্টাইলিং যোগ করতে পারেন:

mat-table {
  width: 100%;
}

mat-paginator {
  margin-top: 20px;
}

এখানে mat-table এর প্রস্থ এবং mat-paginator এর জন্য মার্জিন সেট করা হয়েছে।

Angular Material টেবিল পেজিনেশন একটি কার্যকরী ফিচার যা বড় ডাটাসেটকে ছোট ছোট পেজে ভাগ করে দেখাতে সাহায্য করে। এটি MatTable কম্পোনেন্টের সাথে MatPaginator কম্পোনেন্ট ব্যবহার করে খুব সহজে ইমপ্লিমেন্ট করা যায়। পেজ সাইজ, পেজ অপশন এবং পেজ পরিবর্তন ইভেন্টের মাধ্যমে ডেটা নিয়ন্ত্রণ করা সম্ভব। Angular Material এর সাহায্যে আপনি একটি সুন্দর এবং কার্যকরী টেবিল তৈরি করতে পারবেন, যা ব্যবহারকারীদের জন্য আরও সুসংগত ও দ্রুত ডাটা প্রদর্শন নিশ্চিত করবে।

Angular Material এর <mat-table> কম্পোনেন্টটি ডাটা টেবিল তৈরি করার জন্য ব্যবহার করা হয়। এর মাধ্যমে আপনি সুন্দর এবং রেসপন্সিভ টেবিল তৈরি করতে পারেন। ডাটা ফিল্টারিং একটি সাধারণ ফিচার, যা টেবিলের মধ্যে একটি নির্দিষ্ট শর্তের ভিত্তিতে ডাটা সিলেক্ট করতে সহায়ক।

এই গাইডে, আমরা দেখব কিভাবে Angular Material এর টেবিলে ডাটা ফিল্টারিং ইমপ্লিমেন্ট করা যায়।

প্রাথমিক প্রস্তুতি

প্রথমে, Angular Material এর প্রয়োজনীয় মডিউলগুলো ইমপোর্ট করতে হবে।

১. মডিউল ইমপোর্ট করা

MatTableModule এবং MatInputModule ইমপোর্ট করুন:

import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatTableModule,
    MatInputModule,
    MatIconModule
  ]
})
export class AppModule { }

ডাটা ফিল্টারিং ইমপ্লিমেন্ট করা

২. HTML টেমপ্লেট

এখানে আমরা একটি mat-table তৈরি করব এবং একটি input field যোগ করব, যা ব্যবহারকারীর ইনপুট অনুযায়ী টেবিলের ডাটা ফিল্টার করবে।

<div>
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event)" placeholder="Filter">
    <mat-icon matSuffix>search</mat-icon>
  </mat-form-field>
</div>

<table mat-table [dataSource]="dataSource">

  <!-- Column Definitions -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef> Age </th>
    <td mat-cell *matCellDef="let element"> {{element.age}} </td>
  </ng-container>

  <ng-container matColumnDef="address">
    <th mat-header-cell *matHeaderCellDef> Address </th>
    <td mat-cell *matCellDef="let element"> {{element.address}} </td>
  </ng-container>

  <!-- Header and Row Definitions -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

এখানে, matInput ব্যবহার করে আমরা একটি ইনপুট ফিল্ড তৈরি করেছি। keyup ইভেন্টের মাধ্যমে applyFilter() ফাংশন কল হবে, যা ব্যবহারকারীর ইনপুট অনুযায়ী ডাটা ফিল্টার করবে।

৩. TypeScript কোড

এখন, applyFilter() ফাংশনটি তৈরি করতে হবে, যা টেবিলের ডাটা ফিল্টার করবে। আমরা MatTableDataSource ব্যবহার করব, যা Angular Material টেবিলের ডাটা পরিচালনা করে।

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  displayedColumns: string[] = ['name', 'age', 'address'];
  dataSource: MatTableDataSource<any>;

  data = [
    { name: 'John', age: 25, address: 'New York' },
    { name: 'Jane', age: 30, address: 'Los Angeles' },
    { name: 'Jim', age: 35, address: 'Chicago' },
    { name: 'Jake', age: 40, address: 'San Francisco' },
    { name: 'Jill', age: 45, address: 'Houston' }
  ];

  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.data);
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

এখানে:

• MatTableDataSource: এই ক্লাসটি Angular Material টেবিলের জন্য ডাটা সাপ্লাই এবং ফিল্টারিং পরিচালনা করে।
• applyFilter(): এই ফাংশনটি ইনপুট ফিল্ডে লিখিত ভ্যালুর উপর ভিত্তি করে টেবিলের ডাটা ফিল্টার করে।
• this.dataSource.filter: এটি ডাটা ফিল্টার করার জন্য ব্যবহৃত হয়। ফিল্টার ভ্যালু trim() করে, যা অতিরিক্ত স্পেস সরিয়ে ফেলে এবং toLowerCase() ব্যবহার করে ইনপুটকে ছোট অক্ষরে রূপান্তরিত করে, যাতে ফিল্টারিং কেস সেনসিটিভ না হয়।

৪. স্টাইলিং

Angular Material টেবিলের জন্য সাধারণ স্টাইলিং এর প্রয়োজন হতে পারে, যেমন টেবিলের আউটলাইন, শ্যাডো ইত্যাদি। আপনি CSS ফাইল ব্যবহার করে এটিকে কাস্টমাইজ করতে পারেন।

table {
  width: 100%;
}

mat-form-field {
  width: 100%;
  margin-bottom: 20px;
}

এখানে, mat-form-field এর জন্য কিছু মার্জিন এবং টেবিলের প্রস্থ 100% করা হয়েছে।

৫. ফিল্টার কাস্টমাইজেশন

ফিল্টারটি নির্দিষ্ট কলামগুলোর উপরেও নির্ধারণ করতে পারেন। যেমন, যদি আপনি শুধু নামের কলাম বা শুধুমাত্র বয়সের কলাম ফিল্টার করতে চান, তাহলে আপনি MatTableDataSource এর filterPredicate প্রপার্টি কাস্টমাইজ করতে পারেন।

ngOnInit() {
  this.dataSource = new MatTableDataSource(this.data);

  this.dataSource.filterPredicate = (data: any, filter: string) => {
    return data.name.toLowerCase().includes(filter) || data.age.toString().includes(filter);
  };
}

এখানে, ফিল্টার প্রেডিকেট কাস্টমাইজ করা হয়েছে যাতে name এবং age কলামের ওপর ফিল্টার প্রয়োগ করা যায়।

Angular Material টেবিলের ডাটা ফিল্টারিং একটি গুরুত্বপূর্ণ ফিচার, যা ব্যবহারকারীদের দ্রুত এবং সহজে টেবিলের মধ্যে খোঁজা বা নির্দিষ্ট তথ্য পাওয়া সহজ করে তোলে। MatTableDataSource এবং filter প্রপার্টি ব্যবহার করে আপনি টেবিলের ডাটা ফিল্টার করতে পারেন এবং applyFilter() ফাংশনের মাধ্যমে ফিল্টারিংয়ের কার্যকলাপ পরিচালনা করতে পারেন। আপনি চাইলে কাস্টম ফিল্টার প্রেডিকেট ব্যবহার করে নির্দিষ্ট কলামের উপর ফিল্টারিংও ইমপ্লিমেন্ট করতে পারেন।

Angular Material এর MatTable কম্পোনেন্ট ব্যবহার করে আপনি টেবিল তৈরি করতে পারেন এবং এর সারির (row) কাস্টম ডাটা টেমপ্লেট কাস্টমাইজ করতে পারেন। এটি বিশেষভাবে উপকারী যখন আপনি টেবিলের বিভিন্ন কলামে কাস্টম কন্টেন্ট (যেমন, আইকন, ডেটা ফরম্যাটিং, স্টাইল ইত্যাদি) প্রদর্শন করতে চান।

Angular Material-এর MatTable এর সাথে ng-template এবং ngFor ডিরেকটিভ ব্যবহার করে আপনি টেবিলের ডাটা কাস্টমাইজ করতে পারেন।

কাস্টম ডাটা টেমপ্লেট তৈরি করার জন্য পদক্ষেপ

১. Angular Material ইন্সটল করা

প্রথমে Angular Material ইন্সটল করুন (যদি আগে ইন্সটল না করা থাকে):

ng add @angular/material

২. প্রয়োজনীয় মডিউল ইমপোর্ট করা

আপনার app.module.ts ফাইলে MatTableModule এবং অন্যান্য প্রয়োজনীয় মডিউল ইমপোর্ট করুন।

import { MatTableModule } from '@angular/material/table';
import { MatIconModule } from '@angular/material/icon';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  imports: [
    MatTableModule,
    MatIconModule,
    MatSortModule,
    MatPaginatorModule
  ]
})
export class AppModule {}

৩. টেবিল HTML কোড

এখন, MatTable কম্পোনেন্ট ব্যবহার করে টেবিল তৈরি করতে পারেন। টেবিলের মধ্যে কাস্টম ডাটা টেমপ্লেট (যেমন, আইকন, কাস্টম ফরম্যাটিং ইত্যাদি) প্রদর্শন করতে ng-template ব্যবহার করা হয়।

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Age Column -->
  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef> Age </th>
    <td mat-cell *matCellDef="let element"> {{element.age}} </td>
  </ng-container>

  <!-- Icon Column -->
  <ng-container matColumnDef="icon">
    <th mat-header-cell *matHeaderCellDef> Icon </th>
    <td mat-cell *matCellDef="let element">
      <mat-icon>{{element.icon}}</mat-icon>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

এখানে, ng-container ব্যবহার করা হয়েছে যাতে টেবিলের কলাম এবং সারির কাস্টম টেমপ্লেট ডিফাইন করা যায়।

৪. টাইপস্ক্রিপ্ট কোড

AppComponent ক্লাসে ডাটা সোর্স এবং কলামগুলো ডিফাইন করুন।

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  displayedColumns: string[] = ['name', 'age', 'icon'];
  dataSource = [
    {name: 'John', age: 25, icon: 'person'},
    {name: 'Jane', age: 30, icon: 'person_outline'},
    {name: 'Max', age: 35, icon: 'people'},
  ];
}

এখানে, dataSource অ্যারে ব্যবহার করা হয়েছে, যাতে প্রতিটি রো (row) এর জন্য নাম, বয়স এবং আইকন আছে।

৫. কাস্টম স্টাইল এবং কন্টেন্ট

এখন আপনি যদি টেবিলের কোনো কলামে কাস্টম স্টাইলিং বা কন্টেন্ট দিতে চান, তবে সেটা সহজেই করা সম্ভব। উদাহরণস্বরূপ, আমরা বয়সের জন্য কাস্টম ফরম্যাটিং ব্যবহার করতে পারি।

<ng-container matColumnDef="age">
  <th mat-header-cell *matHeaderCellDef> Age </th>
  <td mat-cell *matCellDef="let element">
    {{element.age > 30 ? 'Senior' : 'Junior'}}
  </td>
</ng-container>

এখানে, বয়সের মানের উপর ভিত্তি করে "Senior" বা "Junior" প্রদর্শিত হবে।

৬. পেজিনেশন এবং সার্টিং (Optional)

এছাড়া, Angular Material এর MatPaginator এবং MatSort ব্যবহার করে টেবিলের পেজিনেশন এবং সার্টিংও করা সম্ভব।

<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

এখানে, আমরা টেবিলের পেজ সাইজ কনফিগার করেছি এবং showFirstLastButtons অপশন ব্যবহার করে প্রথম এবং শেষ পেজের বাটনগুলো দেখানো হয়েছে।

<table mat-table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element">{{element.name}}</td>
  </ng-container>
  
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

এখানে, mat-sort-header ব্যবহার করা হয়েছে যা প্রতিটি কলামকে সার্টেবল (sortable) বানাবে।

Angular Material এর MatTable কম্পোনেন্ট এবং ng-template ব্যবহার করে আপনি সহজেই টেবিলের কাস্টম ডাটা টেমপ্লেট তৈরি করতে পারেন। এতে আপনি বিভিন্ন কলামে কাস্টম কন্টেন্ট, স্টাইল, এবং ডেটা ফরম্যাটিং যোগ করতে পারেন। এছাড়াও, MatPaginator এবং MatSort ব্যবহার করে টেবিলের পেজিনেশন এবং সার্টিং সুবিধা প্রদান করা যায়, যা ব্যবহারকারীদের জন্য আরও ইন্টারঅ্যাকটিভ এবং সহজবোধ্য অ্যাপ্লিকেশন তৈরি করতে সহায়ক।